<!--
 * @Author: zw 775925302@qq.com
 * @Date: 2023-02-11 17:45:50
 * @LastEditors: zw 775925302@qq.com
 * @LastEditTime: 2023-02-19 00:32:19
 * @FilePath: /z-lowcode-designerz/src/views/designer/web/designer-page/designer/index.vue
 * @Description: 
-->

<template>
  <div style="position: relative">
    <div style="height: 50px">
      <div class="cPhoneSize">iPhone(375x667)</div>
    </div>
    <div ref="phoneArea" @scroll="onScroll" class="cRootArea" :style="{ height: `${contentHeight}px` }">
      <div
        class="cIphone14Pro"
        :ref="drop"
        :style="{ width: `${pageInfo.width + 20}px`, height: `${contentHeight}px` }"
      >
        <!-- 标尺 -->
        <MarkLayout v-if="pageInfo.showMarkLayer" />

        <!-- 绘画网格 -->
        <GridLayer v-if="pageInfo.showGridLayer" :width="pageInfo.width" :height="pageInfo.height" :size="10" />

        <!-- 画布 -->
        <div v-for="(item, index) in designWidgetList" :key="index">
          <DragComponent :widget="item" v-if="item.cmpType == 'component'" />
          <component v-else :is="item.component" :widget="item"></component>
        </div>
        <DragPreviewLayout :scorll-top="curScorllTop" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="DesignerPanel">
import { ref, defineComponent, inject, computed, unref, nextTick } from "vue";
import { designEditKey } from "@/hooks/lowcode/keys";
import type { TypeDesignProvide, TypeWidget } from "@/types/TypeDesign";
import { useDrop } from "vue3-dnd";
import type { XYCoord } from "vue3-dnd";

// import { toRefs } from "@vueuse/core";
import CmpConfig from "@/components-designer/indexCmpConfig";
import { deepClone, generateId, isEmpty } from "@/utils/StrUtil";
import GridLayer from "./GridLayer.vue";
import MarkLayout from "./MarkLayout.vue";

export default defineComponent({
  components: {
    MarkLayout,
    GridLayer,
  },
  setup() {
    let {
      designWidgetList,
      designSelectedWidget,
      emitHistoryChange,
      setDesignSelectWidget,
      initScreenPos,
      removeWidgetFromFatherWidgets,
      pageInfo,
      setSnapToGrid,
    } = inject(designEditKey) as TypeDesignProvide;

    let phoneArea = ref(null);
    nextTick(() => {
      initScreenPos.value = phoneArea.value!.getBoundingClientRect();
    });

    let curScorllTop = ref(0);
    const onScroll = (event: any) => {
      curScorllTop.value = event.target.scrollTop;
    };

    let contentHeight = ref(pageInfo.value.height + pageInfo.value.top);
    const [collect, drop] = useDrop(() => ({
      accept: ["component", "element"],
      drop(item: TypeWidget, monitor) {
        console.log("father->为true，表示没有被停靠", monitor.didDrop(), curScorllTop.value);

        if (monitor.didDrop()) {
          //判断是不是在当前拖拽层结束,如果为true，表示不是在自己层结束
          return;
        }
        console.log("fatherenter->", monitor.getItemType());
        if (monitor.getItemType() === "component") {
          //说明当前元素是从组件区拖放到设计器内
          var newOrigin = deepClone(item);
          newOrigin.id = generateId();
          let _widget = Object.assign(newOrigin, deepClone(CmpConfig[newOrigin.component]));
          _widget.style.left = Math.round(monitor.getSourceClientOffset()?.x - initScreenPos.value.x);
          _widget.style.top =
            Math.round(monitor.getSourceClientOffset()?.y - initScreenPos.value.y) + curScorllTop.value;
          console.log("_widget", _widget);
          designWidgetList.value.push(_widget);
          setDesignSelectWidget(_widget);
          setSnapToGrid(_widget);
          return;
        }

        /**
         *   拖完后停放
         * 1. 如果这个元素是有fatherWidget,说明他是从其他容器拖出来的，
         *    a. 置空fatherWidget
         *    b. 找到当前这个widget所在的父容器的位置，然后删除他
         * 2. 如果没有fatherWidget，说明他是在主容器内拖动，
         *
         */
        if (item.fatherWidget) {
          //表示是从子容器中拖到主容器
          removeWidgetFromFatherWidgets(item.id, item.fatherWidget);
          item.fatherWidget = null;
          item.style.left = Math.round(monitor.getSourceClientOffset()?.x - initScreenPos.value.x);
          item.style.top = Math.round(monitor.getSourceClientOffset()?.y - initScreenPos.value.y);
          designWidgetList.value.push(item);
          setDesignSelectWidget(item);
          setSnapToGrid(item);
          return;
        } else {
          //在主容器内部拖动
          const delta = monitor.getDifferenceFromInitialOffset() as XYCoord;
          item.style.left = Math.round(item.style.left + delta.x);
          item.style.top = Math.round(item.style.top + delta.y);
          if (item.style.left < pageInfo.value.left) {
            item.style.left = pageInfo.value.left;
          }
          if (item.style.top < pageInfo.value.top) {
            item.style.top = pageInfo.value.top;
          }

          setSnapToGrid(item);
          return;
        }
      },

      collect: (monitor) => ({
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop(),
      }),
    }));

    return {
      designWidgetList,
      pageInfo,
      curScorllTop,
      phoneArea,
      contentHeight,

      drop,
      onScroll,
    };
  },
});
</script>

<style scoped lang="scss">
.cRootArea {
  overflow-y: auto;
  overflow-x: hidden;
}

.cIphone14Pro {
  background-color: #f7f7f7;
  position: relative;
  padding-left: 40px;
}

.cPhoneSize {
  line-height: 24px;
  font-size: 14px;
  color: #888888;

}
</style>
